﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQuerySample._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to call CSharp function in Ajax | jQuery Sample</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            /// <summary>
            ///  A function to execute after the DOM is ready.
            /// </summary>
            $("#ServerTimeButton").click(function() {
                /// <summary>
                ///  A function to execute when the ServerTimeButton is clicked.
                /// </summary>
                $.ajax({
                    /// <summary>
                    ///  Perform an asynchronous HTTP (Ajax) request
                    /// </summary>
                    type: "POST",
                    url: "AjaxServer.asmx/ServerTime",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                        /// <summary>
                        /// Display server time when success
                        /// </summary>
                        $('#ServerTimeResponse').html(response.d);
                    },
                    failure: function(msg) {
                        /// <summary>
                        /// show error message when there is an error
                        /// </summary>
                        $('#ServerTimeResponse').html(msg.d);
                    }
                });
                return false;
            });
        });
    </script>

</head>
<body>
    <form id="ServerTimeForm" runat="server">
    <div>
        <asp:Button ID="ServerTimeButton" runat="server" Text="Get Server Time" />
        <div id="ServerTimeResponse" runat="server">
        </div>
    </div>
    </form>
</body>
</html>
